<template>
	<div class="surroundingswatch">
		<div class="pighostel" v-for='item in 4' @click='gotoeditapighostel'>
			<div class='circle'>{{item}}</div><span class='pigtxt fsize28w'>号猪舍</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				news: []
			};
		},
		onLoad: function() {
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					this.news = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			gotoeditapighostel(e) {
				uni.navigateTo({
					url: '../editapighostel/editapighostel' 
				});
			}
		}
	}
</script>

<style lang="less">
	.surroundingswatch {
		display: flex;
		flex-wrap: wrap;
		.pighostel {
			background: url(../../../static/administrator/pighostel.png);
			background-size: cover;
			width: 250rpx;
			height: 144rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin: 48rpx 0 16rpx 82rpx;
			display: flex;
			padding: 16rpx 0 0 12rpx;
			.circle {
				width:42rpx;
				height:42rpx;
				font-size:36rpx;
				text-align: center;
				line-height: 42rpx;
				font-family:DINCondensed-Bold,DINCondensed;
				color:rgba(255,255,255,1);
				border-radius: 50%;
				border: 2rpx solid rgba(255,255,255,1);;
			}
			.pigtxt {
				margin-left: 8rpx;
				line-height: 44rpx;
			}
		}
	}
	
		
</style>
